<template>
  <view class="page-food-info">
    <swiper
      class="swiper w-100 h500"
      @change="change"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
    >
      <swiper-item
        @click="previewImg(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <!-- <ImageFile :url="item" className="w-100 h-100" /> -->
        <image
          style="width: 100%; height: 100%"
          className="w-100 h-100"
          :src="foodFile + item"
          mode="scaleToFill"
        ></image>
      </swiper-item>
    </swiper>
    <view class="title-info">
      <view class="title">{{ infoData.name || "要吃瓜子吗" }}</view>
      <view class="remark">{{ infoData.remark || "" }}</view>
      <view class="price-add flex-between">
        <view class="price">￥{{ infoData.price || "0.00" }}</view>
        <view class="add-sub flex-between">
          <view
            v-if="cartList.some((val) => val.id === infoData.id)"
            class="add-sub-btn flex-center sub-btn"
            @click.stop="handleSub(infoData)"
            >-</view
          >
          <text
            v-if="cartList.some((val) => val.id === infoData.id)"
            style="margin: 0 20rpx"
            >{{ cartList.find((val) => val.id === infoData.id).number }}</text
          >
          <view
            class="add-sub-btn flex-center add-btn"
            :class="
              !cartList.some((val) => val.id === infoData.id) ? 'text-btn' : ''
            "
            @click.stop="handleAdd(infoData)"
            >{{
              !cartList.some((val) => val.id === infoData.id)
                ? "+加入购物车"
                : "+"
            }}</view
          >
        </view>
      </view>
    </view>
    <shopCart />
  </view>
</template>

<script>
import ImageFile from "../../components/img_file.vue";
import { foodGet } from "@/api/foodPage.js";
export default {
  components: {
    ImageFile,
  },
  data() {
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 80000,
      duration: 500,
      list: ["123", "123123"],
      infoData: {},
      current: "",
      foodFile: uni.getStorageSync("foodFile"),
    };
  },
  onLoad(options) {
    if (options.id) {
      this.getInfo(options.id);
    }
  },
  computed: {
    cartList() {
      return this.$store.state.user.cartList;
    },
  },
  methods: {
    async getInfo(id) {
      console.log("获取详情");
      const res = await foodGet({ id });
      this.infoData = res.body;
      if (res.body.pic) {
        this.list = res.body.pic.split(",");
      }
    },
    change(e) {
      this.current = e.detail.current;
    },
    handleAdd(item) {
      const cartList = this.cartList;
      const res = cartList.some((v) => v.id === item.id)
        ? cartList.map((v) => ({
            ...v,
            number: v.id === item.id ? (v.number || 0) + 1 : v.number,
          }))
        : [...cartList, { ...item, number: 1 }];
      this.$store.dispatch("user/handleSetCardList", res);
    },
    handleSub(item) {
      const cartList = this.cartList;
      const res = cartList
        .map((v) => ({
          ...v,
          number: item.id === v.id ? v.number - 1 : v.number,
        }))
        .filter((v) => v.number > 0);
      this.$store.dispatch("user/handleSetCardList", res);
    },
    previewImg(item) {
      const baseUrl = `${uni.getStorageSync("foodFile") || ""}`;
      uni.previewImage({
        current: baseUrl + item,
        urls: this.list.map((v) => baseUrl + v),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-food-info {
  background-color: #f4f4f4;
  .title-info {
    background-color: #fff;
    padding: 40rpx 30rpx;
    .title {
      font-size: 40rpx;
      font-weight: bold;
      padding-left: 30rpx;
    }
    .remark {
      font-size: 24rpx;
      color: #999;
      margin: 30rpx 0;
    }
    .price-add {
      .price {
        font-size: 40rpx;
        font-weight: bold;
        color: #ea6e66;
      }
      .add-sub-btn {
        width: 44rpx;
        height: 44rpx;
        line-height: 44rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #5cc39d;
      }
      .sub-btn {
        background-color: #fff;
        border: 1px solid #5cc39d;
        line-height: 44rpx;
      }
      .add-btn {
        color: #fff;
      }
      .text-btn {
        width: auto;
        border-radius: 10rpx;
        padding: 13rpx;
      }
    }
  }
}
</style>
